<template>
  <div class="page-wrap">
    <NormalForm pageTitle="群欢迎语" :operateForm="queryForm" :formList="formList" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <!--列表 -->
    <div class="g-card">
      <div class="right-btn">
        <el-button icon="el-icon-plus" type="primary" size="mini" style="height: 32px; margin-left: 80px" @click="addGreeting">创建欢迎语</el-button>
      </div>
      <!-- 表格 -->
      <div style="padding: 0px 20px 20px 20px">
        <el-table v-loading="queryLoading" :data="tableList" style="width: 100%" height="442px">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="欢迎语名称" align="center" prop="welcomeName" show-overflow-tooltip></el-table-column>
          <el-table-column label="群发内容" align="center" prop="welcomeMsg" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建人" align="center" prop="createBy"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" :width="160"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="160" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <div class="option-span">
                <span @click="detail(row)">详情</span>
                <span @click="edit(row)">编辑</span>
                <span @click="cancel(row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
  </div>
</template>

<script>
import { groupWelcomeTplList, removeGroupTlp } from '@/api/groupGreet'

export default {
  name: 'friendNotes',
  data() {
    return {
      queryForm: {
        greetingName: '',
        deptId: null,
        staff: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '欢迎语名称',
          value: '',
          prop: 'greetingName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: ''
        },
        {
          label: '创建人',
          value: '',
          prop: 'staff',
          type: 'STAFF',
          emunName: ''
        },
      ],
      queryLoading: false,
      total: 0,
      tableList: [],
    }
  },
  created() {
    this.handleQuery()
  },
  methods: {
    //查询欢迎语列表
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.groupWelcomeTplListFn();
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.groupWelcomeTplListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.groupWelcomeTplListFn()
    },
    groupWelcomeTplListFn() {
      this.queryLoading = true;
      let param = {
        welcomeName: this.queryForm.greetingName,
        deptId: this.queryForm.deptId,
        userIds: this.queryForm.staff + '',
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        welcomeMsgTplType: '3',
      }
      groupWelcomeTplList(param).then((res) => {
        if (res.code == 200) {
          this.tableList = res.rows || []
          this.total = res.total || 0
        }
        this.queryLoading = false;
      }).catch(() => {})
    },
    // 重置
    handleReset() {
      this.queryForm = {
        greetingName: '',
        deptId: null,
        staff: '',
        pageNum: 1,
        pageSize: 20,
      };
      this.groupWelcomeTplListFn()
    },
    // 创建欢迎语
    addGreeting() {
      this.$router.push({
        name: 'AddGreeting',
        query: { operateFlag: 'ADD' },
      })
    },
    // 详情
    detail(row) {
      this.$router.push({
        name: 'GreetingDetail',
        query: {
          id: row.id,
          operateFlag: 'DETAIL'
        },
      })
    },
    // 编辑
    edit(row) {
      this.$router.push({
        name: 'EditGreeting',
        query: {
          id: row.id,
          operateFlag: 'EDIT'
        },
      })
    },
    // 删除
    cancel(row) {
      this.$confirm('此操作将删除此条欢迎语信息, 是否继续?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        removeGroupTlp({ id: row.id }).then((res) => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.handleQuery()
          }
        }).catch(() => {})
      }).catch(() => {})
    },
  },
}
</script>


  <style lang='scss' scoped>
@import '../../../styles/base.scss';
.page-wrap{
  height: 100%;
}
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}
</style>
